<script>
  import { onMount } from "svelte";
  import { createEventDispatcher } from "svelte";
  import { loginIn, getCaptchaImage } from "../api/index";
  import { getStorage, setStorage } from "../utils/common";

  let codeImg = "";
  let uuid = "";
  let form = {
    username: "",
    password: "",
    code: "",
    remember: true,
  };

  const dispatch = createEventDispatcher();

  onMount(() => {
    getCode();
  });

  const onFinish = async () => {
    try {
      const { token } = await loginIn({ ...form, uuid });
      setStorage("token", token);
      // alert("登录成功");
      // dispatch("navigate", "/");
      window.location.reload();
    } catch (error) {
      console.error(error);
    }
  };

  const getCode = async () => {
    try {
      const { img, uuid: newUuid } = await getCaptchaImage();
      codeImg = img;
      uuid = newUuid;
    } catch (error) {
      console.error(error);
    }
  };
</script>

<div class="login">
  <div class="card">
    <div class="login_title">友电之星可视化平台</div>

    <form on:submit|preventDefault={onFinish} class="loginForm">
      <div>
        <label for="username">账号：</label>
        <input
          class="loginInput"
          type="text"
          bind:value={form.username}
          required
          placeholder="账号"
        />
      </div>
      <div style="height: 16px;"></div>
      <div>
        <label for="password">密码：</label>
        <input
          class="loginInput"
          type="password"
          bind:value={form.password}
          required
          placeholder="密码"
        />
      </div>
      <div style="height: 16px;"></div>
      <div>
        <!-- <label for="code">验证码：</label> -->
        <div class="verificationCode">
          <input
            class="loginInput"
            style="width: 200px"
            type="text"
            bind:value={form.code}
            required
            placeholder="验证码"
          />
          <div on:click={getCode}>
            <img class="codeImg" src={"data:image/gif;base64," + codeImg} alt="图形验证码" />
          </div>
        </div>
      </div>
      <div style="height: 16px;"></div>
      <div>
        <input type="checkbox" bind:checked={form.remember} /> 记住我
      </div>
      <div style="height: 16px;"></div>
      <div>
        <button class="button" type="submit">登 录</button>
      </div>
    </form>
  </div>
</div>

<style>
  .login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/dp/data_bg.png") no-repeat;
    background-size: 100%;
    background-size: cover;
  }
  .card {
    width: 480px;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
  }
  .login .login_title {
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  color: #707070;
  margin-bottom: 32px;
  text-align: center;
}

.login .loginForm {
  padding: 0 20px;
  /* width: 360px; */
}

.login .loginForm .loginInput {
  height: 42px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.login .loginForm .loginInput:focus {
  border-color: #40a9ff;
  outline: none;
}

.login .loginForm .loginFormIcon {
  margin-right: 4px;
}

.login .loginForm .verificationCode {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.button {
  width: 100%;
  height: 42px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #40a9ff;
}

.button:active {
  background-color: #096dd9;
}
.codeImg {
  width: 160px;
  height: 42px;
  cursor: pointer;
  flex: 1;
}
</style>
